<template>
  <div>
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">接入统计</div>
      <div class="numbers">
        <div class="site imgs">
          <div class="img">

            <img src="../assets/1.jpg" alt="">
          </div>
          <div>
            <div class="totalNumber">{{proCount}}</div>
            <span>已接入工地总数</span>
          </div>
          <div class="img">
            <img src="../assets/2.jpg" alt="">
          </div>
        </div>
        <div class="video imgs">
          <img src="../assets/3.jpg" alt="">
          <div>
            <div class="totalNumber">{{monitorCount}}</div>
            <span>已接入视频工地</span>
          </div>
          <img src="../assets/4.jpg" alt="">
        </div>
        <div class="point imgs">
          <img src="../assets/5.jpg" alt="">
          <div>
            <div class="totalNumber">{{pointCount}}</div>
            <span>已配置点位工地</span>
          </div>
          <img src="../assets/6.jpg" alt="">
        </div>
      </div>
      <div style="font-size:18px;margin-bottom:20px;margin-top: 40px;">工地接入总览</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="18.5" >
          <el-checkbox-group v-model="checkList" style="line-height: 30px;" >
            <el-checkbox label="未接入监控" @change="getList(1)"></el-checkbox>
            <el-checkbox label="未配置点位" @change="getList(1)"></el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="8.5" style="float: right;">
          <el-button @click='refresh' style="display: inline-block;" type="primary" plain  icon="el-icon-refresh">刷新</el-button>

        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span type="text" size="mini" >{{scope.row.projectName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="施工单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="monitorCount" label="接入监控" show-overflow-tooltip>
          <template slot-scope="scope">
            <span  v-if="scope.row.monitorCount==0" class="getOut likeBtn">未接入</span>
            <span   v-else class="getInP likeBtn">已接入({{scope.row.monitorCount}})</span>
          </template>
        </el-table-column>
        <el-table-column prop="pointCount" label="配置点位" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.pointCount==0"  class="getOut likeBtn">未配置</span>
            <span v-else class="getInP likeBtn">已配置({{scope.row.pointCount}})</span>
          </template>
        </el-table-column>
        <el-table-column prop="floorPic" label="平面图" show-overflow-tooltip>
          <template slot-scope="scope">
            <span  v-if="scope.row.floorPic==0" class="getOut likeBtn">未上传</span>
            <span  v-else class="getInP likeBtn">已上传</span>
          </template>
        </el-table-column>
        <el-table-column prop="effectPic" label="效果图" show-overflow-tooltip>
          <template slot-scope="scope">
            <span  v-if="scope.row.effectPic==0" class="getOut likeBtn">未上传</span>
            <span v-else class="getInP likeBtn">已上传</span>
          </template>
        </el-table-column>
        <el-table-column prop="aerialPic" label="航拍图" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.aerialPic" class="getInP likeBtn">已上传</span>
            <span v-else class="getOut likeBtn">未上传</span>
          </template>
        </el-table-column>
        <el-table-column prop="aerialPicTime" label="航拍图更新时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span type="text" size="mini" v-if="scope.row.aerialPicTime">{{scope.row.aerialPicTime}}</span>
            <span type="text" size="mini" v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
  import base from "../api/base"
  export default {
    data() {
      return {
        proCount: '',
        monitorCount: '',
        pointCount: '',
        name: '',
        checkList: [],
        tableData: [],
        currentPage: 1,
        pageSize: 5,
        total: 0,
      };
    },
    methods: {
      refresh(){
        this.$api.loginhome.refresh().then(res=>{
          console.log(res)
          if(res.success){
            this.$message.success("刷新成功")
            this.getList(1)
          }
        })
      },
      getTotalNumbers() {
        this.$api.loginhome.getProCount().then(res => {
          if (res.success)
            this.proCount = res.data
        })
        this.$api.loginhome.getMonitorCount().then(res => {
          if (res.success)
            this.monitorCount = res.data
        })
        this.$api.loginhome.getPointCount().then(res => {
          if (res.success)
            this.pointCount = res.data
        })
      },
      getList(value) {
        if(value == 1)
        this.currentPage=1

        let params = {
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          name:this.name,
          hasMonitor:false,
          hasPoint:false,
        }
        this.checkList.forEach(item=>{
          if(item == "未接入监控")
          params.hasMonitor = true
          if(item == "未配置点位")
          params.hasPoint = true
        })
        this.$api.loginhome.getList(params).then(res=>{
          this.tableData = res.data
          this.total = res.recordsTotal
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },
    },
    created() {
      this.getTotalNumbers()
      this.getList(1)
    }
  };
</script>

<style scoped>
  .numbers {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 1300px;
  }

  .imgs {
    width: 30%;
    height: 12vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .imgs span {
    color: #989CA7;
  }

  .totalNumber {
    font-size: 25px;
  }

  .el-pagination {
    padding-top: 20px;
    text-align: right;
  }

  /deep/.el-table th,
  .el-table tr {
    background: #e4e4e4;
  }

  /deep/.el-table thead {
    color: #7a7c80;
  }

  /deep/.el-input-group__append button.el-button {
    background-color: #409eff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 32px;
  }

  /deep/.el-input-group__append .el-button {
    padding: 10px 20px;
  }

  /deep/.el-input-group__append,
  .el-input-group__prepend {
    color: #ffffff;
  }

  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-col-16 {
    text-align: right;
  }

  /deep/.el-dialog__body {
    margin: -35px 0px;
  }
  .getIn{
    background-color: #FFF4D4;
    color: #FDC526;
  }
  .likeBtn{
    width: 65px;
    height: 28px;
    display: block;
    text-align: center;
    line-height: 28px;
    margin: 0 auto;
  }
  .getOut{
    background-color: #e4e4e4;
    color: #7A7C80;
  }
  .getInP{
    background-color: #DDF7F1;
    color: #3AD1AE;
  }
</style>